<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
    <title>上传头像</title>
    <link type="text/css" rel="stylesheet" href="/static/css/userPhotoUpload.css">
    <script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>

</head>
<body>
<div id="addCommodityIndex">
    <a href="#" class="guanbi-i">
        <img class="img" src="/static/images/popup_guanbi.png">
    </a>
    <div id="preview">
        <a href="#">
            <img class="imgHead" src="/static/images/photo_icon.png" onclick="inputAutoClick()">
        </a>
    </div>
    <form action="userPhotoUpload" name="myForm" method="post" enctype="multipart/form-data">

        <div class="tijiao">
            <input type="file" style="display: none" id="previewImg" name="file">
            <a href="#" class="tijiao-a">
                <input type="submit" value="更换头像">
            </a>
        </div>
    </form>
</div>
</body>
<script>
    /*
     * 上传头像
     */
    //窗口效果
    //点击登录class为tou-xiang 显示
    $(".tou-xiang").click(function () {
        $("#addCommodityIndex").show();
    });
    // 点击关闭按钮
    $(".tijiao-a").click(function () {
        $("#addCommodityIndex").hide();
    })
    // 点击关闭按钮
    $(".guanbi-i").click(function () {
        $("#addCommodityIndex").hide();
    })
    $('#previewImg').change(function () {
        $(".imgHead").attr("src", URL.createObjectURL($(this)[0].files[0]));
    });

    function inputAutoClick() {
        $('#previewImg').click();
    }
</script>
</html>